<template>
	<div>
		<div class="shopimg">
			<img :src="formLabelAlign.img" width="360" height="375">
		</div>
		<div class="goback" @click="goback"> < </div>	
				<div class="goanother">
					<img src="../assets/iPhone/l1.png" width="40" height="40">
					<img src="../assets/iPhone/l3.png" width="40" height="40">
				</div>
				<div class="list">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="changeinfo">
					<span>四色可选</span>
					<div class="choose">
						<div><img src="../assets/iPhone/5.jpg" height="32" width="32"></div>
						<div><img src="../assets/iPhone/5.jpg" height="32" width="32"></div>
						<div><img src="../assets/iPhone/5.jpg" height="32" width="32"></div>
						<div><img src="../assets/iPhone/5.jpg" height="32" width="32"></div>
					</div>

				</div>
				<div class="pricewrap">
					<div class="b6"><span>￥{{formLabelAlign.pirce}}</span></div>
					<div class="b7"><span style="text-decoration: line-through;">￥4799</span><span>&nbsp;&nbsp;9.6折</span></div>
					<div><img src="../assets/kq.webp" width="69" height="18" ></div>
				</div>
				<div class="titleforgood">
						<p>{{formLabelAlign.product}}</p>
	
							<span>首单38元包邮</span>
							<span>上门退货</span>
							<span>7天可退</span>
		
				</div>
				<div class="zpbz">
					<img src="../assets/zp.webp" width="73" height="13">
					<span class="l1">100%正品 专业鉴定 正品险</span>
					<span class="l2"> > </span>
				</div>
				<div class="about">
					<div>
						<p>颜色/型号</p>
					</div>
					<div>
						<p>规格</p>
					</div>
					<div>
						<p>商品参数</p>
					</div>
					<div>
						<p>配送至</p>
					</div>
					<div>
						<p>运费</p>
					</div>
					<img src="../assets/微信图片_20220426164722.png" alt="">
					<div>
						<p>商品详情</p>
						
					</div>
				</div>
				<div class="shopcar">
					<div class="pricebox1">
						<img src="../assets/c29e6c81c33385a881ddd5fac158baf.png" width="70" height="70">
						<img src="../assets/3ae567630eb155c86bd8f6caf01eb50.png" width="60" height="60"  @click="gocar()" >
					</div>
					
					<div class="pricebox" @click="gocar">
						<span class="p5">￥{{formLabelAlign.count}}</span>
						<span class="p6" >￥{{formLabelAlign.pirce}}</span>
					</div>
				</div>
				
		</div>
</template>

<script>
	
	export default {
		data(){
				return{
					formLabelAlign:""
				}
		},
		methods: {
			goback() {
				this.$router.back();
			},
			gocar(){
				let strobj = JSON.stringify(this.formLabelAlign)
				this.$router.push({
				    path: '/car',
				    query:{shopinfo: encodeURIComponent(strobj)}
				})
				
			}
		},
		mounted(){
			if (this.$route.query.allData) {
			    let formObj = decodeURIComponent(this.$route.query.allData)
			    this.formLabelAlign = JSON.parse(formObj)
			}
		}
	}
</script>

<style scoped="scoped">
	.goback {
		color: white;
		font-size: 25px;
		text-indent: -5px;
		line-height: 35px;
		text-align: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		position: relative;
		top: -380px;
	}

	.goanother {
		text-align: center;
		display: flex;
		justify-content: space-evenly;
		line-height: 32px;
		width: 83px;
		height: 32px;
		border-radius: 15px;
		position: relative;
		top: -420px;
		left: 270px;
	}

	.goanother img {
		border-radius: 50%;
	}

	.list li {
		color: #888787;
		float: left;
		margin-left: 15px;
		position: relative;
		top: -140px;
		left: 85px;
	}

	.changeinfo {
		width: 100%;
		height: 60px;
		position: relative;
		top: -130px;
		display: flex;
		justify-content: space-evenly;
		line-height: 60px;
	}

	.changeinfo span {
		margin-left: -20px;
		font-size: 12px;
		color: #000000;
	}

	.choose {
		margin-top: 10px;
		margin-right: 30px;
		display: flex;
		justify-content: space-between;
	}

	.choose img:hover {

		border: 0.5px solid red;
		margin-left: 15px;
	}

	.pricewrap {
		width: 100%;
		height: 74px;
		background: url(../assets/shop1.webp) no-repeat center center;
		background-size: 100%;
		position: relative;
		top: -130px;
	}

	.b6 {
		font-size: 25px;
		color: white;
		font-family: "arial rounded mt bold";
		padding-left: 20px;
		padding-top: 10px;
	}

	.b7 {
		font-size: 14px;
		color: white;
		font-family: "arial rounded mt bold";
		padding-left: 22px;
		}
	.pricewrap img {
		position: relative;
		left: 270px;
		top: -30px;
	}
	.titleforgood{
		position: relative;
		top: -140px;
		
		
	}
	.titleforgood p {
		font-size: 16px;
		color: #222222;
	}
	.titleforgood span{
		display: inline-block;
		background-color: #36c88e;
		width: 83px;
		height: 14px;
		font-size: 10px;
		color: white;
		padding:4px 0 4px 0;
		text-align: center;
		margin-left: 5px;
	}
.zpbz{
	position: relative;
	top: -120px;
}
.zpbz img {
	vertical-align:middle;
}
.zpbz .l1 {
	font-size: 12px;
	color: #585C64;
	margin-left: 15px;
}
.zpbz .l2 {
	padding-left: 90px;
	font-size: 15px;
}
.about{
	position: relative;
	top: -100px;
}
.shopcar{
	width: 365px;
	height: 65px;
	position: fixed;
	margin-top: -400px;
	z-index: 99;
	display: flex;
}
.shopcar .pricebox1 {
	flex: 2;
}
.pricebox{
	flex: 3;
	display: flex;
}
.pricebox span{
	flex: 1;
	text-align: center;
	line-height: 65px;
}
.p5{
	background-color: #f688a4;
	text-decoration: line-through;
	font-size: 18px;
	color: white;
	font-weight: 700;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}
.p6{
	background-color: #f03867;
	font-size: 20px;
	color: white;
	font-weight: 700;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}
</style>
